<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户列表</title>

<link type="text/css" rel="stylesheet" href="../style/easydialog.css"></link>
<link type="text/css" rel="stylesheet" href="../style/page.css"></link>
<style type="text/css">
	
	#user_content{
		width:998px;
		height: auto;
		overflow:hidden;
		border:1px solid #ccc;
		font-size:14px;
	}
	
	.clear{
		clear: both;
		height: 0px;
		font-size: 1px;
    	line-height: 0px;
    	display:inline;
    	overflow:hidden;
	}
	
	.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	.clearfix { zoom:1; }


	.dt_head{
		display: inline;
		position: relative;
		width:100px;
		height:25px;
		float:left;
		padding:2px 5px;
		background: #eee;
		border: 1px solid #ccc;
		margin: 5px 5px;
		
	}
	
	.dt_body{
		display: inline;
		position: relative;
		width:100px;
		height:25px;
		overflow:hidden;
		float:left;
		padding:2px 5px;
		background: white;
		border: 1px solid #ccc;
		margin: 5px 5px;
	}
	
</style>

<style>
	.btn{
		margin-top:10px;
		padding: 4px 4px;
	}
	
	.my_wrapper{
		#background:#ECE9D8;
		background:white;
	}
	.my_content{
		padding:10px 80px 60px 80px;
		margin:2px 2px;
		font-size: 13px;
	}
</style>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/easydialog.min.js"></script> 
<script type="text/javascript" src="../js/page.js"></script>

<script type="text/javascript">
function pagination(pageIndex){
	var url = "user-list.do?pageHolder.pageIndex=" + pageIndex;			    
    window.location.href=url; 
}
</script>

</head>
<body>
	<div id="add-user-content">
		<a href="###" class="add-user">增加一个用户</a>
	</div>
	<div id="user_content">
	<div class="dt_head">id:</div><div class="dt_head">用户名:</div><div class="dt_head">密码:</div><div class="dt_head">操作:</div>
		<!-- 解决ie6,7下清除浮动问题 -->
		<div class="clear"></div>
		<div class="clearfix"></div>
		<c:forEach var="user" items="${userList }">
			<div class="clearfix " id="${user.id }">
				<div class="dt_body">${user.id }</div>
				<div class="dt_body">${user.username }</div>
				<div class="dt_body">${user.password }</div>
				<div class="dt_body"><a href="###" class="update-user" ref="${user.id }">修改</a>&nbsp;&nbsp;<a href="###" class="delete-user" ref="${user.id }">删除</a></div>
			</div>
		</c:forEach>
		
		 <c:if test="${pageHolder.pageCount>0}">
			<div class="pageBox">			   
				<p><script type="text/javascript">nav(${pageHolder.pageIndex},${pageHolder.pageCount},5,'pagination');</script></p>
			</div>
		</c:if>
		<%-- -
		<div class="clearfix ">
			<div class="dt_body"> 2</div>
			<div class="dt_body">lisi</div>
			<div class="dt_body">123465</div>
			<div class="dt_body"><a href="###">修改</a>&nbsp;&nbsp;<a href="###">删除</a></div>
			
		</div>
		-%>
		
		<%-- 影藏的更新弹窗--%>
		<div id="update-box" class="easyDialog_wrapper my_wrapper">
		  	    <h4 id="easyDialogTitle" class="easyDialog_title" style="cursor: move;"><a id="closeBtn" class="close_btn" title="关闭窗口" href="javascript:void(0)">×</a>
		  	    	修改用户的基本信息：
		  	    </h4>
		  	    <form action="">
		  	   		 <div id="pop_update_user" class="easyDialog_content my_content">
		  	    	
		  	    		<span>用户名：</span><input type="text" value="" class="text"/></br>
		  	    		<span>密&nbsp;&nbsp;码：</span><input  type="password" value="" class="text"/></br>
		  	    		<input type="hidden" value=/>
		  	    		<input type="button" value="修改" class="btn btn_highlight" onclick="sendUpdate();"/><input type="reset" value="重置" class="btn btn_normal"/>
		  	    	</div>
		  	    	
		  	    	<div class="easyDialog_footer">
		  	    		
		  	    	</div>
		  	    </form>
		  	
		</div>
	</div>
	
			<%-- 影藏的添加用户弹窗--%>
		<div id="uadd-box" class="easyDialog_wrapper my_wrapper">
		  	    <h4 id="easyDialogTitle" class="easyDialog_title" style="cursor: move;"><a id="closeBtn" class="close_btn" title="关闭窗口" href="javascript:void(0)">×</a>
		  	    	添加用户的基本信息：
		  	    </h4>
		  	    
		  	   		 <div id="pop_update_user" class="easyDialog_content my_content">
		  	    	
			  	    	<form action="register.do" method="post" id="register_form">
							<label for="username">用户名  ：</label> <input id="username" type="text" name="username"/><span class="error"></span></br>
							<label for="password">密码 ：&nbsp;&nbsp;&nbsp;</label><input id="password" type="password" name="password"/><span class="error"></span></br>
							<label for="repassword">确认密码：</label><input id="repassword" type="password"/><span class="error"></span></br>
							<textarea name="content1" cols="100" rows="8" style="width:700px;height:400px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea>
							<input type="button" value="增加" class="btn btn_highlight" onclick="addUser();"/><input type="reset" value="重置" class="btn btn_normal"/>(提交快捷键: Ctrl + Enter)
						</form>
						
						
		  	    		
		  	    	</div>
		  	    	
		  	    	<div class="easyDialog_footer">
		  	    		<div id="return_result"></div>
		  	    	</div>
		  	
		</div>
	</div>
	
	<script type="text/javascript">
	$(function(){
		//给删除和更新标签绑定事件
		$("#add-user-content .add-user").bind("click",showAddUerDialog);
		$("#user_content .update-user").live("click",updateUser);
		$("#user_content .delete-user").live("click",deleteUser);
		$(".easyDialog_title").bind("click",function(){
			$(".my_wrapper").hide();
		})
		
	})
	
	function updateUser(){
		
		/**
		easyDialog.open({
			container : 'update-box',
			autoClose : true,
			fixed : false
		});
		*/
		var userId = $(this).attr('ref');
		$.post("get-user-info.do",{user_id:userId},function(data){
			//将用户的信息设置到弹窗中
			var user = [];
			user.push(data.user.username);
			user.push(data.user.password);
			//$('#dfd').val(222)
			$("body").data("userId",userId);
			$('#update-box input[class=text]').each(function(i){//alert(i);
				//alert($(this).attr('id'));
				//alert("---"+user[i]);
				console.log($(this));
				//$(this).attr('value',user[i]);	
				//$(this).hide();
				$(this).val(user[i]);
			});
			
			var content = $('#update-box').html();
			easyDialog.open({
				  container :'update-box',
				  overlay : false
			});
			//设置弹窗的高度
			//$('.easyDialog_wrapper').width(450);
		})
		
	}
	
	function sendUpdate(){
		var param = {};
		var userId = $("body").data("userId");
		var username = "";
		var password = "";
		var user = [];
		user.push(userId);
		$('#update-box input[class=text]').each(function(i){//alert(i);
			user.push($(this).val());
		});
		param["uid"] = userId;
		if(userId){
			param["username"] = user[0];
			param["password"] = user[1];
			$.get("update-user.do",param,function(data){
				if(data.result){
					infoDialog('更新成功！ ');
					//修改羡慕显示用户的信息为更新后的内容
 					$('#'+userId+' .dt_body').each(function(i){
						$(this).html(user[i]);
					}) 
				}
				else{
					infoDialog('更新失败！ ');
				}
			});
		}else{
			infoDialog('更新失败！ ');
		}
		
	}

	
 	function infoDialog(message){
		
 		easyDialog.open({
			  container : {
			    header : '提示信息',
			    content : message
			  },
			  overlay : false,
			  autoClose : 1000
			}); 
		
	} 
 	
	function deleteUser(){
	 	//var userId = $('body').data('userId');
	 	var userId = $(this).attr('ref');
	 	var param = {};
		param["uid"] = userId;
		if(userId){
			$.get("delete-user.do",param,function(data){
				if(data.result){
					infoDialog('删除成功！ ');
					//移除删除了的用户信息
					$('#'+userId).remove();
				}
				else{
					infoDialog('删除失败！ ');
				}
			});
		}else{
			infoDialog('删除失败！ ');
		} 
	}
	
	function showAddUerDialog(){
		//清除上传添加用户中弹窗中的基本信息
		$("#return_result").html("");
		$("#register_form .error").html("");
		$("#register_form input[type=text][name=username]").val("");
    	$("#register_form input#password").val("");
    	$("#register_form input#repassword").val("");
		easyDialog.open({
			  container :'uadd-box',
			  overlay : false
		});
	}
	function addUser(){
		var username = $("#register_form input[type=text][name=username]").val();
    	var password = $("#register_form input#password").val();
    	var repassword = $("#register_form input#repassword").val();
    	
    	$("#register_form .error").html();
    	if(""==username){
    		$("#register_form span:eq(0)").text("用户名不可以为空！");
    		$("#register_form input[type=text][name=username]").focus();
    		return false;
    	}else if(username.length<6){
    		$("#register_form span:eq(0)").text("用户名不可以少于6个字符！");
    		$("#register_form input[type=text][name=username]").focus();
    		return false;
    	}else if(""==password){
    		$("#register_form span:eq(1)").text("密码不可以为空！");
    		$("#register_form input#password").focus();
    		return false;
    	}else if(password!=repassword){
    		$("#register_form span:eq(2)").text("密码不一致，请重新输入！");
    		return false;
    	}else{
    		username = encodeURIComponent(username);
    		password = encodeURIComponent(password);
    		
    		var params = {};
    		params["username"] = username;
    		params["password"] = password;
    		
    		$.post("register.do",params,function(data){
    			if(data.result){
    				var userId = data.result;
    				infoDialog('添加成功！ ');
    				$("#return_result").html("注册成功！");
					//将新增加的的用户信息添加到列表的前面
					$('#user_content .clearfix:first').after("<div class='clearfix ' id="+userId+">"+
							"<div class='dt_body'>"+userId+"</div>"+
							"<div class='dt_body'>"+username+"</div>"+
							"<div class='dt_body'>"+password+"</div>"+
							"<div class='dt_body'><a href='###' class='update-user' ref="+userId+">修改</a>&nbsp;&nbsp;<a href='###' class='delete-user' ref="+userId+">删除</a></div>"+
					"</div>");
					/* $("#user_content .clearfix:eq(1) .update-user").live("click",updateUser);
					$("#user_content .clearfix:eq(1) .delete-user").live("click",deleteUser); */
    			}else{
    				$("#return_result").html("添加失败！");
    			}
    			
    		})
    	}
	}
</script>
</body>
</html>